<template>
	<view class="container">
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ 'active': currentTab === index }"
				@click="switchTab(index)">
				{{ tab.name }}
				<view v-if="currentTab === index" class="tab-underline"></view>
			</view>
		</view>
		<!-- -->
		<view class="" v-if="currentTab === 0">
			<!-- ?'active':'unactive' -->
			<view class="coupon-item margin-v" :class="active" :style="style"
				v-for="(item, index) in availableRedpackets">
				<view class="discount-money">
					<view class="price" v-if="item.discountMoney">
						<text class="money">￥{{item.discountMoney}}</text>
					</view>
					<view class="type">
						<text v-if="item.minimumMoney===0">无门槛</text>
						<text v-else>有门槛</text>
					</view>
				</view>
				<view class="detail">
					<view class="title">
						<text>{{item.title}}</text>
					</view>
					<view class="label">
						<text v-if="item.usableRangeType === 0">全场通用</text>
						<text v-else-if="item.usableRangeType === 1">盲盒可用</text>
						<text v-else-if="item.usableRangeType === 2">指定商品</text>
					</view>
					<view class="valid-date" v-if="item.isPerpetual === 0">
						过期时间：<text>{{item.deleteTime}}</text>
					</view>
					<view class="valid-date" v-if="item.isPerpetual === 1">
						过期时间：<text>永久</text>
					</view>
					<view class="limit-type gray">
						<view>
							<text>{{item.description}}</text>
						</view>
					</view>
				</view>
			</view>
				<view style="height: 90vh;overflow: hidden;"
					v-if="!availableRedpackets.length">
					<NoData></NoData>
				</view>
		</view>

		<view class="" v-if="currentTab === 1">
			<view style="height: 90vh;overflow: hidden;"
				v-if="!unavailableRedpackets.length">
				<NoData></NoData>
			</view>
			<view class="coupon-item margin-v" :class="active?'active':'unactive'" :style="style"
				v-for="(item, index) in unavailableRedpackets">
				<view class="discount-money">
					<view class="price" v-if="item.discountMoney">
						<text class="money">￥{{item.discountMoney}}</text>
					</view>
					<view class="type">
						<text v-if="item.minimumMoney===0">无门槛</text>
						<text v-else>有门槛</text>
					</view>
				</view>
				<view class="detail">
					<view class="title">
						<text>{{item.title}}</text>
					</view>
					<view class="label">
						<text v-if="item.usableRangeType === 0">全场通用</text>
						<text v-else-if="item.usableRangeType === 1">盲盒可用</text>
						<text v-else-if="item.usableRangeType === 2">指定商品</text>
					</view>
					<!--  -->
					<view class="label" v-if="item.scorePrice">
						<!-- v-if="baseCoupon.scorePrice" -->
						<!-- {{baseCoupon.scorePrice}}{{scoreAlias}} -->
						<text>兑换</text>
					</view>
					<view class="valid-date" v-if="item.isPerpetual === 0">
						过期时间：<text>{{item.deleteTime}}</text>
					</view>
					<view class="valid-date" v-if="item.isPerpetual === 1">
						过期时间：<text>永久</text>
					</view>
					<view class="limit-type gray">
						<view>
							<text>{{item.description}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 规则 -->
		<!-- 		<navigator url="/pages/rule/index?type=chip">
			<view class="float-btn rule" hover-class="hover">
				<image mode="aspectFill" src="@/static/smallBox/rule.png"></image>
				<text>规则</text>
			</view>
		</navigator> -->
		<!-- 	<view class="list">
			<view class="item" v-for="(item, index) in list">
				<image :src="item.icon" mode="aspectFill" class="thumb"></image>
				<view class="title">{{item.title}}</view>
				<view class="balance">{{item.balance}}</view>
			</view>
		</view> -->
	
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				availableRedpackets: [],
				unavailableRedpackets: [],
				currentTab: 0, // 默认选中第一个Tab
				tabs: [{
					name: "可用红包",
					type: "wechat"
				}, {
					name: '不可用红包',
					type: "alipay"
				}],
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			}
		},
		async onLoad() {
			uni.showLoading({
				title: '加载中'
			})
			this.$http('/zb-redpacket-user/selectAllAvailable', "get", {
				userId: this.userInfo.id
			}).then(res => {
				this.availableRedpackets = res.data.availableRedpackets
				this.unavailableRedpackets = res.data.unavailableRedpackets

				uni.hideLoading()
			})
		},
		methods: {
			// 切换Tab
			switchTab(index) {
				this.currentTab = index;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: url(../../static/bgColor.png) center/ cover no-repeat;
	}

	.container {
		height: 100vh;
		overflow: auto;
	}

	.tab-bar {
		width: 100%;
		display: flex;
		align-items: center;
		color: #fff;
		justify-content: center;
	}

	.tab-underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 4rpx;
		background-color: #6a0dad;
	}

	.tab-item {
		position: relative;
		padding: 20rpx 80rpx;
		cursor: pointer;
	}

	.tab-item.active {
		font-weight: bold;
		font-size: 35rpx;
	}

	.coupon-item {
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 10upx;
		overflow: hidden;
		display: flex;
		align-items: center;

		&.unactive {
			.discount-money {
				color: #A5A7B2;
			}

			.detail {
				color: #A5A7B2;
			}

			.action .btn {
				background-color: #BBBBBB;
				color: #fff;
			}
		}

		&.active {
			.discount-money {
				color: #e52302;
			}

			.action .btn {
				background-color: #f52302;
				color: #fff;
			}
		}

		.discount-money {
			width: 180upx;
			height: 220upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.price {
				font-size: 50upx;

				.unit {
					font-size: 24upx;
				}
			}

			.type {
				margin-top: 6upx;
				font-size: 22upx;
			}
		}

		.detail {
			flex: 1;

			.title {
				font-size: 28upx;
				display: flex;
				align-items: center;
			}

			.label {
				padding: 0 12upx;
				height: 32upx;
				line-height: 32upx;
				font-size: 20upx;
				margin-left: 8upx;
				color: #F27233;
				position: relative;
				border: 1px solid #F27233;
				display: inline;
				border-radius: 30rpx;
			}

			.valid-date {
				font-size: 24upx;
				margin-top: 10upx;
			}

			.limit-type {
				font-size: 22upx;
				margin-top: 10upx;
			}
		}

		.action {
			width: 180upx;
			display: flex;
			justify-content: center;

			view {
				width: 130upx;
				line-height: 44upx;
				font-size: 22upx;
				text-align: center;
				border-radius: 1000upx;
			}
		}
	}

	.float-btn {
		position: fixed;
		right: 0rpx;
		top: 160rpx;
		width: 130rpx;
		height: 66rpx;
		background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
		color: #6c2a09;
		border-radius: 33px 0px 0px 33px;
		padding: 0rpx 14rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;

		z-index: 100;

		font-weight: 500;
		font-size: 24rpx;

		image {
			width: 30rpx;
			height: 36rpx;
		}
	}

	.btn-a {
		color: rgb(217, 163, 123);
		// font-size: ;
	}

	.list {
		padding: 10rpx 20rpx;

		.item {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			background-color: #1a1724;
			border: 1rpx solid #5d4748;
			// box-shadow: 0px 6rpx 30rpx 0px rgba(226, 222, 204, 0.5);
			border-radius: 20rpx;
			padding: 20rpx 30rpx;

			.thumb {
				width: 130rpx;
				height: 130rpx;
				border-radius: 10rpx;
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.balance {
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 35rpx !important;
			}

			.title {
				font-weight: 800;
				flex-grow: 1;
				font-size: 38rpx;
				margin-left: 30rpx;
				background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

			}
		}
	}
</style>